<template>
  <div class="footer">
    <item txt="首页" mark="home" :crru="crruMark" @change='getval'>
      <template #active>
        <img src="../../assets/images/ic_tab_home_active.png" alt="" />
      </template>
      <template #normal>
        <img src="../../assets/images/ic_tab_home_normal.png" alt="" />
      </template>
    </item>
    <item txt="书影音" mark="audio" :crru="crruMark" @change='getval'>
      <template #active>
        <img src="../../assets/images/ic_tab_subject_active.png" alt="" />
      </template>
      <template #normal>
        <img src="../../assets/images/ic_tab_subject_normal.png" alt="" />
      </template>
    </item>
    <item txt="广播" mark="broadcast" :crru="crruMark" @change='getval'>
      <template #active>
        <img src="../../assets/images/ic_tab_status_active.png" alt="" />
      </template>
      <template #normal>
        <img src="../../assets/images/ic_tab_status_normal.png" alt="" />
      </template>
    </item>
    <item txt="小组" mark="group" :crru="crruMark" @change='getval'>
      <template #active>
        <img src="../../assets/images/ic_tab_group_active.png" alt="" />
      </template>
      <template #normal>
        <img src="../../assets/images/ic_tab_group_normal.png" alt="" />
      </template>
    </item>
    <item txt="我的" mark="mine" :crru="crruMark" @change='getval'>
      <template #active>
        <img src="../../assets/images/ic_tab_profile_active.png" alt="" />
      </template>
      <template #normal>
        <img src="../../assets/images/ic_tab_profile_normal.png" alt="" />
      </template>
    </item>
  </div>
</template>

<script>
import item from "./item.vue";
export default {
  components: { item },
  data() {
      return {
          crruMark:'home'
      }
  },
  methods: {
      getval(val){
          this.crruMark = val
      }
  },
};
</script>

<style>
.footer {
  position: fixed;
  bottom: 0;
  border-top: 1px solid gainsboro;
  height: 1rem;
  background: #ffffff;
  width: 100%;
  display: flex;
}

</style>